<!--
*@Author: QWP
*@Description: 合同收款方配置
*@Date 2024-09-19 14:08
-->
<template>
  <a-layout class="f-h-100">
    <u-table-header>
      <u-form :model="state.searchF.model"
        :gutter="16"
        :elements="searchEl"
        :isSearch="true"
        @formChange="getSearch(1)"
        class="f-w-auto">
        <a-col>
          <a-space>
            <u-icon-button itype="search" @click="getSearch(1)">
              查询
            </u-icon-button>
            <!-- <u-icon-button itype="export" @click="exportBtn">
              导出
            </u-icon-button> -->
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button itype="add" @click="toEdit">
                新增
              </u-icon-button>
              <u-icon-button itype="edit" @click="toEdit(2)">
                编辑
              </u-icon-button>
              <u-icon-button itype="delete" @click="deleteBtn">
                删除
              </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-table-header>
    <u-table-content >
      <u-table
        :columns="state.columns"
        :data="state.tabData"
        :loading="loading"
        v-model:pagination="pagenation"
        :scroll="{ y: useTableScroll() }"
        @onDblclick="(record) => {
          state.keyid = record.keyid;
          state.showEdit = true;
        }"
        @onSelect="({ selectedRows }) => state.tabSelData.splice(0, state.tabSelData.length, ...selectedRows)" 
        @change="getSearch"/>
    </u-table-content>

    <!-- 新增编辑 -->
    <Edit v-model:open="state.showEdit"
      title="合作公司编辑"
      :keyid="state.keyid"
      width="800px"
      @success="state.showEdit = false, state.keyid = '', getSearch()"
      @close="showEdit = false, state.keyid = ''" />
  </a-layout>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h, watch, useAttrs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useBaseStore, useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
import { alertC, confirmC, nullC, numberC, isValue, jsonCopy, messageC } from "@/util/common";
import Edit from "./Edit.vue";
import { useTableScroll } from '@/hooks/useTable'
import * as contractCoopApi from '@/service/administration/contractCooperate'

const { MECHANISMTYPE } = storeToRefs(useBaseStore())

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})

const searchEl  = [
  { label: "关键字", key: "keywords", element: "input", 
    formItemProps: {
      labelWidth: '60px',
      style: { 
        width: '300px'
      }
    }, 
    componentProps: { placeholder: '公司名称' }
  },
];

const loading = ref<boolean>(false)

const state = reactive({
  searchF: {
    model: {
      keywords: null,
    },
  },
  total: 0,
  loading: false,
  tabData: [],
  tabSelData: [],
  columns: [
    { align: "center", title: "序号", width: 50,
      customRender: ({ index }) => index += 1
    },
    { title: "公司名称", minWidth: 120, dataIndex: "companyname",sortable: 'custom' },
  ],

  showEdit: false,
  keyid: "",
})

onMounted(() => {
  getSearch();
})

// 列表查询
async function getSearch(current?: number) {
  if (current == 1) {
    pagenation.current = current
  }

  state.searchF.current = pagenation.current;
  state.searchF.size = pagenation.size;

  loading.value = true;
  try {
    const res = await contractCoopApi.page(state.searchF)
    if(res.code == 0) {
      state.tabData = res.data.records;
      pagenation.total = res.data.total;
    }
  } catch (error) {}
  loading.value = false;
}

// 编辑
function toEdit(type?: number) {
  if(type == 2) {
    if (state.tabSelData.length !== 1) {
      messageC("能且只能选择一条数据进行编辑!" );
      return;
    }
    state.keyid = state.tabSelData[0].keyid;
  }
  state.showEdit = true;
}

// 删除
async function deleteBtn() {
  if (state.tabSelData.length == 0) {
    messageC("请先选择要删除的数据!", "warning");
    return;
  }
  
  loading.value = true
  try {
    await alertC("确认删除选中的数据?", "confirm");
    
    let ids = state.tabSelData.map((item) => item.keyid);
    const res = await contractCoopApi.del({ ids: ids.join(",") })
    if (res.code == 0) {
      getSearch();
      messageC(res.msg, "success");
    } else {
      messageC(res.msg, "warning");
    }
  } catch (error) {}

  loading.value = false
}

// 导出
async function exportBtn() {
  loading.value = true;
  try {
    const res = await contractCoopApi.download({ ...state.searchF, size: -1, filename: "车辆合作机构信息" })
  } catch (error) { }
  loading.value = false;
}
</script>
<style lang="scss"></style>
